.strokeanimation-content {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 800px;
  height: 250px;
  margin: 0 auto;
}

path {
  stroke-width: 8;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.path-1 {
  stroke: url(#gradient1);
  stroke-dasharray: 1850 2000;
  stroke-dashoffset: 1851;
  animation: stroke 3s linear forwards;
}
.path-2 {
  stroke: url(#gradient2);
  stroke-dasharray: 260 1000;
  stroke-dashoffset: 261;
  animation: stroke 1s linear 3s forwards;
}
.path-3 {
  stroke: url(#gradient3);
  stroke-dasharray: 100 1000;
  stroke-dashoffset: 101;
  animation: stroke 1s linear 4s forwards;
}

@keyframes stroke {
  to {
    stroke-dashoffset: 0;
  }
}
